<style scoped>
  .max{width: 100%;height: 100%;}
  .max .titl{position: fixed;left: 0px;top:0px;width: 100%;height: 7%;z-index: 999;}
  .box{width: 100%;margin-top: 7% ;}
    
</style>
<template>
  <div class="max">
    <div class="titl">
      <van-nav-bar
      title="新增收货地址"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"/>
    </div>
    <div class="box">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        />
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Toast } from 'vant';
const onClickLeft = () => history.back();
const onClickRight = () => Toast('新增地址');

const chosenAddressId = ref('1');
const list = reactive([
      {
        id: '1',
        name: 'OMINI.BASS',
        tel: '18802155485',
        address: '江苏省  徐州市  泉山区  中国矿业大学南湖校区',
        isDefault: true,
      },
      {
        id: '2',
        name: '李四',
        tel: '1310000000',
        address: '浙江省杭州市拱墅区莫干山路 50 号',
      },
      {
        id: '3',
        name: '李四',
        tel: '1310000000',
        address: '浙江省杭州市拱墅区莫干山路 50 号',
      },
      {
        id: '4',
        name: '李四',
        tel: '1310000000',
        address: '浙江省杭州市拱墅区莫干山路 50 号',
      },
      {
        id: '5',
        name: '李四',
        tel: '1310000000',
        address: '浙江省杭州市拱墅区莫干山路 50 号',
      },
      {
        id: '6',
        name: '李四',
        tel: '1310000000',
        address: '浙江省杭州市拱墅区莫干山路 50 号',
      },
    ]);
const onEdit = (item, index) => Toast('编辑地址:' + index)
const onAdd = (item, index) => Toast('新增编辑地址:')
</script>